<template>
    <div>
        <el-card shadow="hover">
            {{studentVo}}
            <el-form :inline="true" :model="studentVo" class="demo-form-inline">

                <el-form-item label="学生姓名">
                    <el-input v-model="studentVo.sname" placeholder="学生姓名"></el-input>
                </el-form-item>
                <el-form-item label="学生住址">
                    <el-input v-model="studentVo.addr" placeholder="学生住址"></el-input>
                </el-form-item>
                <el-form-item label="所在班级">
                    <el-select v-model="studentVo.cid" placeholder="所在班级">
                        <el-option label="所有班级" value="0"></el-option>
                        <el-option :label="c.cname" :value="c.cid" v-for="c in classes" :key="c.cid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" icon="el-icon-search" plain>查询</el-button>
                </el-form-item>
            </el-form>
            <el-divider ></el-divider>
            <el-table
                    :data="students"
                    style="width: 100%">
                <el-table-column
                        label="学号"
                        prop="sid"
                        align="center"
                        width="80">
                </el-table-column>
                <el-table-column
                        label="姓名"
                        align="center"
                        prop="sname"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="性别"
                        align="center"
                        prop="sex"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="年龄"
                        prop="age"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="住址"
                        prop="addr"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="所在班级"
                        prop="cname"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column label="操作"  align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页导航-->
            <el-pagination
                    style="text-align: right;margin-top: 10px;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                students: [],           // 代表当前的学生列表
                page:1,                 // 当前页
                total:10,               // 总记录数
                pagesize:5,             // 每页大小
                studentVo:{sname:'',addr:''},           // 条件查询学生对象
                classes:[],             // 代表班级列表
            }
        },
        created() {
            //1. 查询所有学生
            // this.findStudents();
            //2. 分页查询学生列表
            // this.findByPage(this.page,this.pagesize);
            //2. 条件查询带分页
            this.search();
            //3. 查询所有的班级
            this.findClasss();
        },
        methods: {
            //1. 查询所有学生
            findStudents(){
                this.$axios.get("/student?cmd=list").then(resp=>{
                    this.students = resp.data
                })
            },
            //2. 分页查询学生
            findByPage(){
                this.$axios.get(`/student?cmd=findByPage&page=${this.page}&pagesize=${this.pagesize}`).then(resp=>{
                    this.total = resp.data.total;
                    this.students = resp.data.rows;
                })
            },
            //3. 查询所有班及
            findClasss(){
                this.$axios.get("/classes?cmd=list").then(resp=>{
                    this.classes = resp.data
                })
            },
            //4. 条件查询带分页
            search(){
                //4.1 将json对象转换为字符串
                let stud = JSON.stringify(this.studentVo);
                //4.2 向后台发送请求
                this.$axios.post(`/student?cmd=search&page=${this.page}&pagesize=${this.pagesize}`,
                "stud="+stud).then(resp=>{
                    this.total = resp.data.total;
                    this.students = resp.data.rows;
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            // 每页大小改变时触发
            handleSizeChange(val) {
                this.pagesize = val;
                // this.findByPage()
                this.search()
                console.log(`每页 ${val} 条`);
            },
            // 当前页改变时触发
            handleCurrentChange(val) {
                this.page = val;
                // this.findByPage();
                this.search()
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
    .demo-form-inline{
        text-align: left;
        padding: 0;
        margin-top: 10px;
    }
</style>